import * as React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import BasePageV5 from 'react-native-cdy-baseui/components/BasePageV5';
import ImageConstants from '../resources/ImageConstants';
import moment from 'moment';
import AutoSizingImage from 'react-native-cdy-baseui/components/AutoSizingImage';
import {responsiveNumber} from 'react-native-responsive-number';
const DAYS_IN_WEEK = 7;
const CLASSES_PER_DAY = 8;

class CurriculumPage extends BasePageV5 {
  constructor(props) {
    super(props);
    this.state = {};
  }

  renderContent() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'stretch',
          backgroundColor: 'white',
        }}>
        <Image
          source={ImageConstants.IMG_BCG}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
          resizeMode="cover"
        />
        <Image
          source={ImageConstants.IMG_SHADOW}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        />
        <View style={styles.container}>
          <View style={styles.timeColumnContainer}>
            {/* 显示上、下午时间段 */}
            <View style={styles.label}>
              <Text style={{color: 'white', fontSize: responsiveNumber(7)}}>
                课程
              </Text>
            </View>
            <View style={styles.timeColumn}>{this.renderCourseLabel()}</View>
          </View>
          <View style={styles.timeColumnContainer}>
            {/* 显示上、下午时间段 */}
            <View style={styles.label}>
              <Text style={{color: 'white', fontSize: responsiveNumber(7)}}>
                时间
              </Text>
            </View>
            <View style={styles.timeColumn}>{this.renderTimeLabels()}</View>
          </View>
          {/* 课程内容 */}
          <View style={styles.courseContainer}>{this.renderCourses()}</View>
        </View>
        <AutoSizingImage
          source={ImageConstants.IMG_BOTTOM_TEXT}
          style={{alignSelf: 'center', width: '60%', marginTop: '2%'}}
          resizeMode={'contain'}
        />
      </View>
    );
  }
  renderCourseLabel = () => {
    const timeLabels = [];
    const values = ['一', '二', '三', '四', '五', '六', '七', '八'];
    for (let i = 0; i < values.length; i++) {
      const timeText = `第${values[i]}节`;
      timeLabels.push(
        <View key={timeText} style={[styles.label, styles.timeLabel]}>
          <Text style={{textAlign: 'right', fontSize: responsiveNumber(7)}}>
            {timeText}
          </Text>
        </View>,
      );
    }
    return timeLabels;
  };
  renderTimeLabels = () => {
    const timeLabels = [];
    const values = ['08:00-09:30', '09:40-11:10', '', '', '', '', '', ''];
    for (let i = 0; i < values.length; i++) {
      const timeText = `${values[i]}`;
      timeLabels.push(
        <View key={timeText} style={[styles.label, styles.timeLabel]}>
          <Text style={{textAlign: 'right', fontSize: responsiveNumber(5)}}>
            {timeText}
          </Text>
        </View>,
      );
      // 上午结束时间是12:00，下午开始时间是13:00
    }
    return timeLabels;
  };

  renderCourseLabels = index => {
    const timeLabels = [];
    const values = ['', '', '', '', '', '', '', ''];
    for (let i = 0; i < values.length; i++) {
      const timeText = `${values[i]}`;
      timeLabels.push(
        <View key={timeText} style={[styles.label, styles.timeLabel]}>
          <Text style={{textAlign: 'right', fontSize: responsiveNumber(7)}}>
            {timeText}
          </Text>
        </View>,
      );
      // 上午结束时间是12:00，下午开始时间是13:00
    }
    return timeLabels;
  };

  renderCourses = () => {
    const courses = [
      {
        id: 1,
        name: '语文',
        teacher: '张老师',
        start: moment('2020-11-09 08:30'),
        end: moment('2020-11-09 10:00'),
        backgroundColor: '#FA8072',
        textColor: 'white',
      },
      {
        id: 2,
        name: '数学',
        teacher: '李老师',
        start: moment('2020-11-09 10:20'),
        end: moment('2020-11-09 12:00'),
        backgroundColor: '#00BFFF',
        textColor: 'white',
      },
      {
        id: 3,
        name: '英语',
        teacher: '王老师',
        start: moment('2020-11-09 14:00'),
        end: moment('2020-11-09 15:30'),
        backgroundColor: '#228B22',
        textColor: 'white',
      },
      {
        id: 4,
        name: '物理',
        teacher: '赵老师',
        start: moment('2020-11-09 16:00'),
        end: moment('2020-11-09 17:30'),
        backgroundColor: '#FF8C00',
        textColor: 'white',
      },
    ];
    const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周七'];
    return days.map(day => {
      return (
        <View style={styles.timeColumnContainer}>
          <View style={styles.label}>
            <Text style={{color: 'white', fontSize: responsiveNumber(7)}}>
              {day}
            </Text>
          </View>
          <View style={styles.timeColumn}>{this.renderCourseLabels()}</View>
        </View>
      );
    });
  };
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: '70%',
    marginTop: '12%',
    marginHorizontal: '5%',
    backgroundColor: 'white',
    padding: '2%',
    borderRadius: 20,
  },
  timeColumnContainer: {
    flex: 1,
  },
  timeColumn: {
    flex: 2,
    borderRightWidth: 1,
    borderRightColor: '#ccc',
  },
  label: {
    backgroundColor: '#008080',
    justifyContent: 'center',
    alignItems: 'center',
    // height: 30,
    width: '100%',
  },
  timeLabel: {
    backgroundColor: 'white',
    flex: 1,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
  },
  courseContainer: {
    flex: 7,
    flexDirection: 'row',
  },
});
export default CurriculumPage;
